<template>
  <div class="look-vote-detail">
    <head-top head-title="票数详情" hidden='true' go-back="true"></head-top>
    <div class="fixed">
      <div class="areas-name">{{title}}</div>
      <div>
        <ul class="navbar">
          <li class="nav-item" v-for="(item, index) in dataList" :key="index" @click="showContainer(index)"><span
            :class="{'item': i===index}">{{item.name}}({{item.count || 0}})</span></li>
        </ul>
      </div>
    </div>
    <div class="vote">
      <div v-show="i === 0">
        <div>
          <!--网络投票-->
          <div class="text border-bottom" @click="showIntelItem">
            <span>网络投票</span>
            <span class="arrow">{{intelList.length}}票&nbsp;＞</span>
          </div>
          <transition name="intel">
            <ul class="toupiao-wrapper zindex" v-show="intelShow">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in intelList" :key="key">
                <div class="left">{{item.name}}室</div>
                <div class="right intel" @click="noCancle(item.id)">
                  <div class="yi-color">已投</div>
                  <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
        <div>
          <!--电话投票-->
          <div class="text border-bottom" @click="showOtherItem">
            <!--<span>其他投票</span>-->
            <span>电话投票</span>
            <span class="arrow">{{otherList.length}}票&nbsp;＞</span>
          </div>
          <transition name="other">
            <ul class="toupiao-wrapper" v-if="otherShow">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in otherList" :key="key">
                <div class="left">{{item.name}}室</div>
                <div class="right" @click="cancleVote(item.id, item.name)">
                  <div class="yi-color">已投</div>
                  <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
        <div>
          <!--房保投票-->
          <div class="text" @click="showFangbaoItem">
            <!--<span>其他投票</span>-->
            <span>房保投票</span>
            <span class="arrow">{{fangbaoList.length}}票&nbsp;＞</span>
          </div>
          <transition name="fangbao">
            <ul class="toupiao-wrapper" v-if="fangbaoShow">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in fangbaoList" :key="key">
                <div class="left">{{item.name}}室</div>
                <div class="right" @click="noCancle(item.id)">
                  <div class="yi-color">已投</div>
                  <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
      </div>
      <ul class="toupiao-wrapper" v-show="i === 1">
        <li class="tou-wrapper border-bottom-last" v-for="(item,index) in sendList" :key="index">
          <div class="left">{{item.name}}室</div>
          <div class="right" @click="cancleVote(item.id, item.name)">
            <div class="yi-color">已送票</div>
            <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
            <label :for="item.id"></label>
          </div>
        </li>
      </ul>
      <ul class="toupiao-wrapper" v-show="i === 2">
        <li class="tou-wrapper border-bottom-last" v-for="(item,index) in recycleList" :key="index">
          <div class="left">{{item.name}}室</div>
          <div class="right" @click="cancleVote(item.id, item.name)">
            <div class="yi-color">已回收</div>
            <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
            <label :for="item.id"></label>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { lookVote, deleteVote, lookSatVote, deleteSatVote } from '../../api/toupiaotongji.js'
  import { Toast, MessageBox } from 'mint-ui'

  export default {
    name: 'LookVoteDetail',
    data () {
      return {
        dataList: [{'name': '已投票'}, {'name': '已送票'}, {'name': '已回收'}],
        i: 0,
        j: 0,
        intelList: [], // 网络投票
        otherList: [], // 电话投票
        fangbaoList: [], // 房保投票
        sendList: [],
        recycleList: [],
        intelShow: false, // 网络投票显示标识
        otherShow: false, // 电话投票显示标识
        fangbaoShow: false, // 房保投票显示标识
        title: '',
        pageTypes: ''
      }
    },
    components: {
      headTop
    },
    created () {
      // 区分点击过来的是网络投票统计还是满意度的投票统计页面
      this.pageTypes = this.$route.params.page
      this._lookVote()
    },
    methods: {
      showContainer (index) {
        this.i = index
      },
      _lookVote () {
        if (this.pageTypes === 'statistics') {
          // 网络投票统计的数据接口
          // newold: 判断新老版本投票
          lookVote(this.$route.params.did, this.$route.params.vid, this.$route.params.newold).then(res => {
            if (res.code === 200) {
              this.sendList = res.data.giveVote
              this.recycleList = res.data.alreadyVote
              this.intelList = res.data.intelVote // 网络投票
              this.otherList = res.data.otherVote // 电话投票
              this.fangbaoList = res.data.fangbaoVote // 房保投票
              this.title = res.data.title
              var voteLength = [(this.otherList.length + this.intelList.length + this.fangbaoList.length), this.sendList.length, this.recycleList.length]
              this.dataList.forEach((item, index) => {
                this.$set(item, 'count', voteLength[index])
              })
            }
          })
        } else if (this.pageTypes === 'statisticsd') {
          // 满意度调查的统计数据接口
          lookSatVote(this.$route.params.did, this.$route.params.vid, this.$route.params.newold).then(res => {
            if (res.code === 200) {
              this.sendList = res.data.giveVote
              this.recycleList = res.data.alreadyVote
              this.intelList = res.data.intelVote
              this.otherList = res.data.otherVote
              this.title = res.data.title
              var voteLength = [(this.otherList.length + this.intelList.length), this.sendList.length, this.recycleList.length]
              this.dataList.forEach((item, index) => {
                this.$set(item, 'count', voteLength[index])
              })
            }
          })
        }
      },
      // 网络投票收缩栏点击
      showIntelItem () {
        this.intelShow = !this.intelShow
        if (this.intelShow) {
          this.otherShow = false
          this.fangbaoShow = false
        }
      },
      // 电话投票收缩栏点击
      showOtherItem () {
        this.otherShow = !this.otherShow
        if (this.otherShow) {
          this.intelShow = false
          this.fangbaoShow = false
        }
      },
      // 房保投票收缩栏点击
      showFangbaoItem () {
        this.fangbaoShow = !this.fangbaoShow
        if (this.fangbaoShow) {
          this.intelShow = false
          this.otherShow = false
        }
      },
      cancleVote (id, name) {
        MessageBox({
          title: '提示',
          message: `你确定取消${name}室状态？`,
          showCancelButton: true,
          cancelButtonText: '放弃'
        }).then(action => {
          if (action === 'confirm') {
            // 网络投票统计的取消
            if (this.pageTypes === 'statistics') {
              deleteVote(id, this.$route.params.newold).then(res => {
                if (res.code === 200) {
                  Toast({
                    message: '取消成功',
                    position: 'middle',
                    duration: 1000
                  })
                  this._lookVote()
                } else {
                  Toast({
                    message: '取消失败',
                    position: 'middle',
                    duration: 1000
                  })
                }
              })
            } else if (this.pageTypes === 'statisticsd') {
              // 满意度调查的取消
              deleteSatVote(id, this.$route.params.newold).then(res => {
                if (res.code === 200) {
                  Toast({
                    message: '取消成功',
                    position: 'middle',
                    duration: 1000
                  })
                  this._lookVote()
                } else {
                  Toast({
                    message: '取消失败',
                    position: 'middle',
                    duration: 1000
                  })
                }
              })
            }
          }
        })
      },
      noCancle (id) {
        Toast({
          message: '网络投票不能取消',
          position: 'middle',
          duration: 1000
        })
      }
    }
  }
</script>

<style lang="scss">
  .look-vote-detail {
    .fixed {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      z-index: 2;
      .areas-name {
        padding: 0 10px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #f2f2f2;
      }
      .navbar {
        width: 100%;
        display: flex;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        .nav-item {
          flex: 1;
          height: 100%;
          text-align: center;
          border-bottom: 2px solid #f2f2f2;
          font-size: 13px;
          .item {
            display: inline-block;
            height: 100%;
            padding: 0 10px;
            border-bottom: 2px solid #0078de;
            color: #0078de;
          }
        }
      }
    }
    .vote {
      padding-top: 110px;
      .text {
        padding: 0 10px;
        height: 35px;
        line-height: 35px;
        background-color: #f2f2f2;
        position: relative;
        span {
          &:nth-of-type(1) {
            font-size: 13px;
          }
        }
        .arrow {
          float: right;
          font-size: 15px;
          color: #888;
        }
      }
      .zindex {
        z-index: 3;
      }
      .toupiao-wrapper {
        -webkit-overflow-scrolling: touch;
        // position: relative;
        background-color: #fff;
        .tou-wrapper {
          margin: 0 10px;
          height: 44px;
          line-height: 44px;
          font-size: 16px;
          .left {
            display: inline;
            text-align: left;
          }
          .right {
            font-size: 14px;
            text-align: right;
            position: relative;
            top: -42px;
            height: 44px;
            input[type='checkbox'] {
              display: none
            }
            label {
              position: absolute;
              right: -8px;
              top: 12px;
            }
            label:before {
              content: '';
              position: absolute;
              left: -30px;
              top: 0;
              width: 16px;
              height: 16px;
              border: 1px solid #ddd;
              border-radius: 50%;
              transition: all 0.3s ease;
              -webkit-transition: all 0.3s ease;
              -moz-transition: all 0.3s ease;
            }
            label:after {
              content: '';
              position: absolute;
              left: -23px;
              top: 3px;
              width: 4px;
              height: 10px;
              border: 0;
              border-right: 1px solid #fff;
              border-bottom: 1px solid #fff;
              background: #fff;
              transform: rotate(45deg);
              transition: all 0.3s ease;
            }
            input[type='checkbox']:checked + label:before {
              background: #0087de;
              border-color: #0087de;
            }
            input[type='checkbox']:checked + label:after {
              background: #0087de;
            }
            .yi-color {
              color: #000 !important;
              margin-right: 25px;
            }
          }
        }
      }
    }
  }
</style>
